<template>
	<div class="c-wrap">
		<main class="c-main">
			<ApldTable class="mt10 self-table" v-bind="tableConfig" :data="tableData">
				<template v-slot:Region="{ row }">
					<el-tag color="#0052d9" :dark="true" effect="dark">{{ row.Region }}</el-tag>
				</template>
			</ApldTable>
		</main>
	</div>
</template>

<script setup lang="ts">
import { ApldTable } from '@/components/AplidCrud'
import { onMounted } from 'vue'
import apiMod from '@/apiMod/index'
import { getStore } from '@/utils/store'
const props = defineProps<{
	RegionId?: string | number
}>()

const tableConfig = {
	showIndex: false,
	columns: [
		{
			label: '街道',
			prop: 'Region',
			align: 'center',
		},
		{
			label: '服务机构个数',
			prop: 'organizationNum',
			align: 'center',
		},
		{
			label: '完成进度',
			prop: 'organizationIntegrity',
			align: 'center',
		},
		{
			label: '服务对象人数',
			prop: 'serviceObjectNum',
			align: 'center',
		},
		{
			label: '完整度',
			prop: 'dpServiceObjectIntegrity',
			align: 'center',
		},
		{
			label: '从业人数',
			prop: 'staffNum',
			align: 'center',
		},
		{
			label: '完整度',
			prop: 'staffIntegrity',
			align: 'center',
		},
	],
}

const tableData = ref([])
const userInfo = getStore('userInfo') || {}
const getInitData = () => {
	tableData.value = []
	let areaObj = {
		provinceId: undefined,
		cityId: undefined,
		areaId: undefined,
		streetId: undefined,
		communityId: undefined,
	}
	if (userInfo.authProvince) areaObj.provinceId = userInfo.authProvince
	if (userInfo.authCity) areaObj.cityId = userInfo.authCity
	if (userInfo.authArea) areaObj.areaId = userInfo.authArea
	if (userInfo.authStreet) areaObj.streetId = userInfo.authStreet
	if (userInfo.authCommunity) areaObj.communityId = userInfo.authCommunity
  let query = {}
  if(props.RegionId) {
    query = {
      areaId: props.RegionId
    }
  }else {
    query = {
      ...areaObj
    }
  }
	apiMod
		.view_dpSubsidyStatistics_statistics(query)
		.then((res) => {
			const data = res.data
			tableData.value = data.result
		})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.c-wrap {
	width: 100%;
	.c-header {
		padding: 5% 20%;
	}
	.c-main {
		padding: 5% 10%;
		background-color: #fff;
		.self-table {
			margin: 0 auto;
			border: 1px solid #dcdcdc;
			border-radius: 10px 10px 0 0;
		}
	}
}
.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #0052d9;
}
</style>
